<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>迁移图</title>
    <script include="proj4,mapv" src="./static/libs/include-openlayers-local.js"></script>
    <style>
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        var map = new ol.Map({
            //地图容器div的ID
            target: 'map',
            //地图容器中加载的图层
            layers: [],
            //地图视图设置
            view: new ol.View({
                //地图初始中心点
                center: ol.proj.fromLonLat([110, 30]),
                //地图初始显示级别
                zoom: 2,
                //最小级别
                minZoom: 1,
                //最大级别
                maxZoom: 12
            })
        });

        map.addLayer(new ol.layer.Tile({
            source: new ol.source.TileImage({
                url: 'https://api.tiles.mapbox.com/v4/mapbox.dark/{z}/{x}/{y}.png?access_token=' +
                    'sk.eyJ1IjoiY2hlbmdkYWRhIiwiYSI6ImNqZDFjaGo0ZjFzcnoyeG54enoxdnNuZHUifQ.hTWXXBUQ0wdGeuDF3GWeUw'
            })
        }))

        var randomCount = 1000;

        var data = [];

        var citys = ["北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特", "哈尔滨", "长春", "沈阳", "济南", "南京", "合肥", "杭州", "南昌", "福州",
            "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川", "兰州", "西宁", "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口"
        ];

        // 构造数据
        while (randomCount--) {
            var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
            data.push({
                geometry: {
                    type: 'Point',
                    coordinates: ol.proj.transform([cityCenter.lng, cityCenter.lat], 'EPSG:4326', 'EPSG:3857')
                },
                count: 30 * Math.random(),
                time: 100 * Math.random()
            });
        }

        var dataSet = new mapv.DataSet(data);

        var mapVOptions = {
            size: 13,
            gradient: {
                0.25: "rgb(0,0,255)",
                0.55: "rgb(0,255,0)",
                0.85: "yellow",
                1.0: "rgb(255,0,0)"
            },
            max: 60,
            draw: 'heatmap'
        }
        map.addLayer(
            new ol.layer.Image({
                source: new ol.source.Mapv({
                    map: map,
                    dataSet: dataSet,
                    mapVOptions: mapVOptions
                })
            })
        );
    </script>


</body>

</html>